<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<%@	taglib prefix="bean" uri="struts-bean" %>
<%@ taglib prefix="logic" uri="struts-logic"%>
<%@page import="java.text.SimpleDateFormat"%>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js" ></script> 
<script>  

$(function() {      
	$( "#fechnacpaciente ").datepicker( {"showAnim":"bounce",dateFormat:'dd/mm/yy'});
	}); 

	<% String mensaje = (String) request.getAttribute("mensaje"); 
	java.util.Date date = new java.util.Date();
	SimpleDateFormat sdf;
	sdf = new SimpleDateFormat("yyyy-MM-dd");
	%>	
	
	$().ready(function(){
		$("form").validate({ onsubmit: false});
		
		$.validator.addMethod(
		"Letra",
		function(value,element){
	                $(element).attr("value", value);
			return /^[a-zA-Z]+(\s[\s\.a-zA-Z]+)*$/.test($.trim(value)) ;
	                },"\nSolo ingresar letras");
		
		$.validator.addMethod(
			"Numero",
			function(value,element){
				$(element).attr("value",value);
				return /^[0-9]+(\s[\s\.0-9]+)*$/.test($.trim(value)) ;
			},"\nSolo ingresar numeros");
		
		$.validator.addMethod(
		  "NumbLetra",
		  function(value,element){
			$(element).attr("value",value);
			 return /^[.0-9a-zA-Z]+(\s[\s\.0-9a-zA-Z]+)*$/.test($.trim(value)) ;
			  },"\nSolo ingresar numeros y letras");	
		
	});	

</script>

<style type="text/css">
label.error{
color: red;
}
</style>
 

<h3>GENERAR HISTORIA CLINICA</h3>
<form id="formDatos">
	<div id="cabDatosHC" class="mb10 bordeSeccion">
	<label>Nro. Historia Clinica:</label>
	<input type="text"  id="nrohc" value="${ucodigo}" disabled="disabled"  readonly="readonly" />
	<label>Fecha creación:</label>
	<input type="text"  id="hcfeccrea" value="<%= sdf.format(date)%>" disabled="disabled"  readonly="readonly"/>
	</div>
	<div id="cabDatosPersonal" class="mb10 bordeSeccion">
		<h4>Datos del Paciente</h4>
		<div>
				<table class="tablaformulario">
				 	<tr>
						<td><label>Codigo:</label></td>
						<td><input type="text" id="codpaciente" class="required Numero"  name="codpaciente" value="${ucodigo+1}" disabled="disabled"/></td>
						<td><label>Sexo:</label></td>
						<td>
							<select id="sexopaciente"  class="required" name="sexopaciente">
							 <option value="">Seleccione</option>
							 <option value="Femenino">Femenino</option>
							 <option value="Masculino">Masculino</option>						 	
						 	</select>						
						</td>
						<td><label>Fecha de Nacimiento:</label></td>
						<td><input type="text" id="fechnacpaciente" class="required" name="fechnacpaciente" size="10" /></td>
					 </tr>
					 <tr>
				 		<td><label>Nombre:</label></td>
						<td><input type="text" id="nombrepaciente" class="required Letra" name="nombrepaciente" /></td>
						 <td><label>Estado Civil:</label></td>
						 <td>	
						 <select id="estadocivilpaciente"  class="required" name="estadocivilpaciente">
						 	<option value="">Seleccione</option>
						 	<option value="Soltero">Soltero</option>
						 	<option value="Casado">Casado</option>
						 	<option value="Divorciado">Divorciado</option>
							<option value="Viudo">Viudo</option>
							<option value="Conviviente">Conviviente</option>						 	
						 </select>
						 </td>
				 	</tr>
				 	<tr>
				 		<td><label>Apellido Paterno:</label></td>
						<td><input type="text" id="apepatpaciente" name="apepatpaciente"  class="required Letra"/></td>
						<td><label>Ocupación:</label></td>
						<td><input type="text" id="ocupacionpaciente" name="ocupacionpaciente" class="required Letra" /></td>
				 	</tr>
				 	<tr>
						 <td><label>Apellido Materno:</label></td>
						 <td><input type="text" id="apematpaciente" name="apematpaciente" class="required Letra"/></td>
						 <td><label>Tipo de Documento:</label></td>
						 <td>
						 <select id="tipodocpaciente" class="required" name="tipodocpaciente">
						 	<option value="">Seleccione</option>
						 	<option value="Dni">DNI</option>
						 	<option value="P.Nacimiento">Partida de Nacimiento</option>				 	
						 </select>
						 </td>
						 <td><label>Nro. Documento:</label></td>
						 <td><input type="text" id="nrodocpaciente" name="nrodocpaciente" class="required Numero" maxlength="8"/></td>
				 	</tr>
				 	<tr>

				 	</tr>			 			 			 
				</table>
		</div>
		<div>
		
		</div>
	</div>
	<div id="cabDatosContacto" class="mb10 bordeSeccion">
		<h4>Datos de Contacto</h4>
		<table class="tablaformulario" >
			<tr>
				<td><label>Telefono casa:</label></td>
				<td><input type="text" id="tlfcasapaciente" name="tlfcasapaciente" class="required Numero" maxlength="7"/></td>
				<td><label>Nombre de familiar:</label></td>
				<td><input type="text" id="familiarpaciente" name="familiarpaciente" class="required Letra"/></td>
			</tr>
			<tr>
				<td><label>Celular:</label></td>
				<td><input type="text" id="celularpaciente" name="celularpaciente" class="required Numero" maxlength="9"/></td>
				<td><label>Telefono:</label></td>
				<td><input type="text" id="telefonofamiliarpaciente" name="telefonofamiliarpaciente" class="required Numero" maxlength="7"/></td>
			</tr>
		</table>
	</div >
	
	<div id="cabDatosUbicacion" class="mb10 bordeSeccion">
		<h4>Datos de Ubicación</h4>
		<table class="tablaformulario" >
			<tr>
				<td><label>Dirección:</label></td>
				<td><input type="text" id="direccionpaciente" class="NumbLetra"name="direccionpaciente" class="inputM"/></td>
			</tr>
		</table>
	</div>
	<div align="center">
		<a href="#nogo" id="grabarHC" class="btn">Grabar</a>
		<a href="inicio.do"  class="btn" >Salir</a>
	</div>
	
</form>


<script type="text/javascript">


	

$("#grabarHC").click(function(e){
	e.preventDefault();	
	if($("form").valid()){	 	
	$.ajax({
		url:'grabarHC.do',
		data:$("#formDatos").serialize(),
		cache:false,
		success:function(html){
			$("#panelcuerpo-cen").html(html);
		}
	});
	}else{	alert("Debe ingresar los datos correctamente");}
	
});

</script>